<template>
	<view>
		<view v-if="user_forum === undefined">
			<text>数据加载中...</text>
		</view>
		<view class="" v-else-if="!user_forum.length">
			<text>该用户未发布过帖子</text>
		</view>
		<uni-swipe-action v-else>
			<uni-swipe-action-item v-for="(item, index) in user_forum" :key="item.forumId" :right-options="options"
				@click="delete_forum($event,item)">

				<uni-card @click="onClick(item.forumId)">
					<text class="title">
						{{ item.forumTitle }}
					</text>
					<text class="txt">
						{{ item.forumMessage }}
					</text>
					<view class="card-actions">
						<view class="right">
							<view class="card-actions-item">
								<uni-icons type="chatbubble" size="20" color="#999"></uni-icons>
								<text class="card-actions-item-text">评论</text>
							</view>
						</view>
					</view>
				</uni-card>

			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.getForumData()
			this.id = option.id
			this.user_forum = this.get_user_forum(option.id);
			console.log("参数id：" + option.id); //打印出上个页面传递的参数。
		},
		data() {
			return {
				id: 0,
				user_forum: [],
				options: [
					// {
					// 	text: '编辑',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// },
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
			}
		},
		methods: {
			...mapMutations('course', ['getForumData']),
			onClick(id) {
				uni.navigateTo({
					url: `/pages/forum/forum-detail/forum-detail?id=${id}`
				})
			},
			get_user_forum(user_id) {
				uni.request({
					url: 'http://localhost:3000/admin/users/forum',
					method: 'get',
					data: {
						id: user_id
					},
					success: (res) => {
						this.user_forum = res.data
						console.log("获取数据：", res);
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			delete_forum(e, item) {
				// if (e.index == 0) {
				// 	console.log(0)
				// }
				if (e.index == 0) {
					uni.request({
						url: 'http://localhost:3000/course/delete',
						method: 'post',
						data: [item, "forum"],
						success: (res) => {
							console.log("删除数据：", res);
							this.get_user_forum(this.id)
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
			},
		},
		computed: {

		},
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		// width: 100%;
		overflow: hidden;
	}

	.title {
		color: #282c35;
		font-size: 40rpx;
		font-weight: 700;
		overflow: hidden;
		//自动换行，
		text-overflow: ellipsis;
		display: -webkit-box;
		//超出几行省略
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		letter-spacing: 2px;
	}

	.txt {
		margin-top: 30rpx;
		color: #282c35;
		font-size: 34rpx;
		overflow: hidden;
		//自动换行，
		text-overflow: ellipsis;
		display: -webkit-box;
		//超出几行省略
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.container {
		overflow: hidden;
	}

	.card-actions {
		// background-color: #666;

		display: flex;
		flex-direction: c;
		justify-content: center;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;

		.left {
			// background-color: #666;
			width: 100%;
			height: 100%;
			line-height: 100rpx;
		}

		.left :active {
			color: #660d0d;
		}

		.right {
			// background-color: #666;
			width: 100%;
			height: 100%;
			line-height: 100rpx;
		}
	}

	.card-actions-item {
		// background-color: #666;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 36rpx;
		color: #666;
		margin-left: 5px;
	}

	.no-border {
		border-width: 0;
	}
</style>